import React, { useState, useEffect } from "react";
import { Menu } from "antd";
import { useSelector } from "react-redux";
import { useNavigate, useLocation } from "react-router-dom";
import { StoreStateType } from "../../interface";
import { DashboardOutlined, } from '@ant-design/icons';
import "./style.css";

import { MenuList } from '../../router/page'

const MyMenu = () => {
  const menuList = useSelector(
    (state: StoreStateType) => state.PublicReducer.menuList
  );

  const [initPath, setInitPath] = useState("");

  const navigate = useNavigate();

  const location = useLocation();

  const collapsed = useSelector((state: any) => state.collapsed);

  useEffect(() => {
    setInitPath(location.pathname);
  }, []);

  // 选中菜单项时的回调函数
  const changeRouter = (path: any) => {
    setInitPath(path.key);
    navigate(path.key);
  };

  return (
    <div>
      <Menu
        selectedKeys={[initPath]}
        mode="inline"
        theme="dark"
        inlineCollapsed={collapsed}
        onClick={changeRouter}
      >
        {MenuList?.map((item: any) => {
          return item.children ? (
            
            <Menu.SubMenu key={item.path} title={item.name}>
              {item.children?.map((v: any) => {
                return <Menu.Item key={v.path}> {v.name} </Menu.Item>;
              })}
            </Menu.SubMenu>

          ) : (
            <Menu.Item key={item.path}  icon={<DashboardOutlined></DashboardOutlined>}>{item.name}</Menu.Item>
          );
        })}
      </Menu>
    </div>
  );
};

export default MyMenu;
